<template>
    <div class="entrylist">
        <ul class="catindexlist">
            <router-link class="catindexlist-item" to="power" tag="li">
                <a>
                    <img src="./icon-power.png">
                    <span>Power Generation<br>电力设备</span>
                </a>
            </router-link>
            <router-link class="catindexlist-item" to="gas" tag="li">
                <a>
                    <img src="./icon-gas.png">
                    <span>Gas<br>燃气发电</span>
                </a>
            </router-link>
            <router-link class="catindexlist-item" to="offshore" tag="li">
                <a>
                    <img src="./icon-offshore.png">
                    <span>Offshore<br>海洋平台动力</span>
                </a>
            </router-link>
            <router-link class="catindexlist-item" to="onshore" tag="li">
                <a>
                    <img src="./icon-onshore.png">
                    <span>Onshore<br>油田动力</span>
                </a>
            </router-link>
            <router-link class="catindexlist-item" to="marine" tag="li">
                <a>
                    <img src="./icon-marine.png">
                    <span>Marine<br>船舶动力</span>
                </a>
            </router-link>
            <router-link class="catindexlist-item" to="propulsion" tag="li">
                <a>
                    <img src="./icon-propulsion.png">
                    <span>Propulsion<br>船舶推进器</span>
                </a>
            </router-link>
            <router-link class="catindexlist-item" to="industrial" tag="li">
                <a>
                    <img src="./icon-industrial.png">
                    <span>Industrial<br>工业动力</span>
                </a>
            </router-link>
            <router-link class="catindexlist-item" to="microgrid" tag="li">
                <a>
                    <img src="./icon-microgrid.png">
                    <span>Microgrid<br>微电网</span>
                </a>
            </router-link>
        </ul>
        <router-view></router-view>
    </div>
</template>

<script type="text/ecmascript-6">
    import Search from 'components/search/search';
	export default {
        created() {
            document.title = "CAT机组"
        }
	}

</script>
<style lang="less" rel="stylesheet/less">
    @import '../../common/less/index.less';

    .catindexlist {
        position: absolute;
        top: 20px;
        margin: 0;
        width: 100%;
        display: flex;
        flex-flow: row wrap;
         background-color: #fff;
        .catindexlist-item {
            list-style: none;
            box-sizing: border-box;
            text-align: center;
            a {
                padding-top: 10px;
                padding-bottom: 15px;
                display: block;
                color: @color-text-333;
                font-size: @font-size-small;
                line-height: 16px;
            }
            img {
                width: 64px;
                height: 64px;
                display: block;
                margin: 0 auto 5px;
            }
        }
    }

    @media all and (orientation: landscape) {
        .catindexlist-item {
            width: 25%;
        }
    }

    @media all and (orientation: portrait) {
        .catindexlist-item {
            width: 50%;
        }

    }
    .parts-list{
        position: absolute;
        top: 98px;
        bottom: 0;
        overflow: hidden;
        width: 100%;
        background: #f2f2f2;
    }

    .page-cell{background-color: #fff;}

    .mint-cell{
        margin: 0 15px;
        .border-bottom-1px(@color-border);
        padding-bottom: 15px;
        .mint-cell-con{
            padding-top: 15px;
            display: flex;
        }
        .part-img{
            flex: 0 0 120px;
            width: 120px;
            height: 95px;
            border: 1px solid @color-border;

        }
        &:last-child{
            .border-none();
            
        }
    }

    .mint-cell-text{
        flex: 1;
        font-size: @font-size-small;
        color: @color-text-666;
        padding-left: 10px;
        box-sizing: border-box;
        line-height: 22px;
        strong{
            display: block;
            color: @color-text-333;
            font-size: @font-size-meduim;
            margin-bottom: 8px;
        }
        span{
            display: block;
        }
    }

    .loading-container{
        position: absolute;
        width: 100%;
        top: 50%;
        transform: translateY(-50%);
        z-index: 888;
    }

    .filtrateTab{
        display: flex;
        height: 45px;
        background-color: #fff;
         .border-bottom-1px(@color-border);
        .filtrate-tab-item{
            overflow: hidden;
             flex: 1;
            text-align: center;
            display: block;
            .border-right-1px(@color-border);
            height: 25px;line-height: 25px;
            margin-top: 10px;
            font-size: @font-size-small-s;
            &:last-child{.border-none();
        }
        span{
            display: inline-block;
            width: 75%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            position: relative;
            padding-right: 10px;
            }
         }
    }
    .drop{
        position: absolute;
        transition: all 6s;
        top:98px;
        width: 100%;
        bottom: 0;
        z-index: 889;
        ul{
            z-index: 67;
            position: relative;
            background-color: @color-bg-white;
            width: 100%;
            li{
                .border-bottom-1px(@color-border);
                height: 44px;
                line-height: 44px;
                text-indent: 14px;
            }
            
        }
        .mask-black{
            width: 100%;
            position: absolute;
            top: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
        }
    }

    
    .mint-cell-allow-donw:after {
        font-size: @font-size-small;
        transition: all .3s;
        border: 2px solid #c8c8cd;
        border-bottom-width: 0;
        border-left-width: 0;
        content: " ";
        top: 50%;
        right: 5px;
        position: absolute;
        width: 5px;
        height: 5px;
        transform: translateY(-80%) rotate(135deg);
    }
    .filtrate-tab-item.active{
        color: @color-bg-active;
        .mint-cell-allow-donw:after{
            transform: translateY(-80%) rotate(-45deg);
            border-color:@color-bg-active;
        }
    }
    .dropitem.active{
        color: @color-bg-active;
    }
    .top-tip{
        position: absolute;  
        top: -40px;  
        left: 0;
        z-index: 1;  
        width: 100%;  
        height:40px;  
        line-height:40px;  
        text-align:center;
        color: #555;font-size: 12px;
    } 
      
    .bottom-tip{
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        color: #777;font-size: 12px;
        background: #f2f2f2;
    }
    .alert{
        display: none;
        position: fixed;
        top: 55px;
        left: 0;
        z-index: 2;
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        color: #fff;
        font-size: 12px;
        background: rgba(7, 17, 27, 0.7);
    }



</style>